<template>
  <div>
    <el-button-group>
      <el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
      <el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button>
      <!-- <el-button type="plain" size="small" @click="$_zoomReset">大小适应 </el-button>
      <el-button type="plain" size="small" @click="$_translateRest"> 定位还原 </el-button> -->
      <el-button type="plain" size="small" @click="$_reset"> 还原(大小&定位) </el-button>
      <template v-if="!disabled">
        <el-button type="plain" size="small" @click="$_undo" :disabled="undoDisable"> 上一步 </el-button>
        <el-button type="plain" size="small" @click="$_redo" :disabled="redoDisable"> 下一步 </el-button>
        <el-button type="plain" size="small" @click="$_catData"> 查看数据 </el-button>
      </template>
      <el-button type="plain" size="small" @click="$_download"> 下载图片 </el-button>
      <el-button type="plain" size="small" @click="$_showMiniMap"> 缩略图 </el-button>
      <!-- <el-button type="primary" size="small" @click="$_executer">
        执行
      </el-button> -->
      <slot></slot>
    </el-button-group>
  </div>
</template>
<script>
import LogicFlow from '@logicflow/core'
export default {
  name: 'Control',
  // props: ["lf"],
  props: {
    lf: { type: LogicFlow },
    disabled: { type: Boolean, default: false },
  },
  data() {
    return {
      undoDisable: true,
      redoDisable: true,
      graphData: null,
      dataVisible: false,
    }
  },
  mounted() {
    this.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
      this.$data.undoDisable = !undoAble
      this.$data.redoDisable = !redoAble
    })
  },
  methods: {
    $_zoomIn() {
      this.lf.zoom(true)
    },
    $_zoomOut() {
      this.lf.zoom(false)
    },
    $_zoomReset() {
      this.lf.resetZoom()
    },
    $_translateRest() {
      this.lf.resetTranslate()
    },
    $_reset() {
      this.lf.resetZoom()
      this.lf.resetTranslate()
    },
    $_undo() {
      this.lf.undo()
    },
    $_redo() {
      this.lf.redo()
    },
    $_download() {
      // 里面带有拖的话,图片下载不了
      this.lf.getSnapshot()
    },
    $_catData() {
      this.$emit('catData')
    },
    $_showMiniMap() {
      const { lf } = this
      lf.extension.miniMap.show(lf.graphModel.width - 150, 40)
    },
    $_executer() {
      this.$message.success('模拟执行成功')
      // const loading = Loading.service({
      //   lock: true,
      //   text: "执行中...",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      // const param = {
      //   nodeStr: JSON.stringify(this.lf.getGraphData()),
      // };
      // request({url: '/executeFlow', method: 'post', data: param}).then((res) => {
      //   MessageBox.success("执行成功")
      // }).finally(() => {
      //   loading.close()
      // })
    },
  },
}
</script>
<style scoped></style>
